<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!--会员管理模块-->
<script type="application/javascript" src="/js/userManage.js"></script>

<script type="text/javascript">

</script>
<div role="tabpanel" class="tab-pane" id="user">
    <div class="check-div form-inline">
        <div class="col-xs-1">
            <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#add-user-dialog">添加用户</button>
        </div>
        <div class="col-xs-5">
            <input type="text" class="form-control input-sm" placeholder="输入文字搜索">
            <button class="btn btn-white btn-xs ">查 询</button>
        </div>
        <div class="col-xs-4 pull-right">
            <form id="import-user-form" method="post"
                  enctype="multipart/form-data">
                <%--<input id='location' class="form-control" disabled>选择文件
                <input type="button" id="i-check" value="浏览" class="btn btn-sm btn-primary" onclick="$('#i-file').click();">
                <input type="file" id='i-file'  accept="application/vnd.ms-excel" onchange="$('#location').val($('#i-file').val());" style="display: none">--%>
               <%-- 选择文件:<input type="file" name="file" width="120px">
                <input type="submit" value="导入">--%>
                    <input id="import-user" type="file" name="file" style="display:none">
                    <div class="input-append form-inline">
                        <input id="file-name" onclick="$('input[id=import-user]').click();" readonly="readonly" class="input-large" type="text" value="浏览文件..." style="height:30px;">
                        <%--<a class="btn" onclick="$('input[id=lefile]').click();">Browse</a>--%>
                        <button class="btn btn-sm form-inline" type="submit" value="导入">导入</button>
                    </div>



            </form>
        </div>


    </div>
    <div class="data-div">
        <div class="row tableHeader">
            <div class="col-xs-1 ">用户ID</div>
            <div class="col-xs-1">头像</div>
            <div class="col-xs-1">姓名</div>
            <div class="col-xs-1">性别</div>
            <div class="col-xs-1">婚姻状态</div>
            <div class="col-xs-2">邮箱</div>
            <div class="col-xs-2">手机号</div>
            <div class="col-xs-1">操作</div>

        </div>


        <div id="user-list" class="tablebody pre-scrollable"
             style="margin-left:-15px;padding-left: 30px;margin-right: -2px;margin-bottom: -25px;">
        </div>

    </div>
    <!--页码块-->
    <footer class="footer" style="margin-top: 32px">
        <ul class="pagination">

            <%-- <li style="text-align: center;padding-top: 0" class="btn btn-success btn-xs btn-circle">
                 <i style="font-size: 1.6em;color: white;cursor: pointer;background-color: transparent" onclick="staffPreviousPage()" id="staff-first-page" class=" icon-double-angle-left"></i>
             </li>--%>

            <li>
                <a onclick="userFirstPage()" id="user-first-page"
                   class="btn icon-double-angle-left btn-change-page"></a>
            </li>
            <li>
                <a onclick="userPreviousPage()" id="user-previous-page"
                   class="btn icon-angle-left btn-change-page"></a>
            </li>
            <li>
                <select id="user-page-select">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                </select>
                页
            </li>
            <li class="gray">
                共<i id="user-total-page">20</i>页
            </li>

            <li>
                <a onclick="userNextPage()" id="user-next-page" class="btn icon-angle-right btn-change-page"></a>
            </li>

            <li>
                <a onclick="userLastPage()" id="user-last-page"
                   class="btn icon-double-angle-right btn-change-page"></a>
            </li>
        </ul>
    </footer>

    <!--弹出添加用户窗口-->
    <div class="modal fade" id="add-user-dialog" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">添加用户</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <form id="add-user-form" class="form-horizontal">
                            <div class="form-group">
                                <label for="user-name" class="col-xs-3 control-label">会员姓名：</label>
                                <div class="col-xs-8 ">
                                    <input name="name" type="text" class="form-control input-sm duiqi" id="user-name"
                                           placeholder=""/>
                                </div>
                            </div>

                            <%--<div class="form-group">
                                <label for="sIdNumber" class="col-xs-3 control-label">身份证号：</label>
                                <div class="col-xs-8 ">
                                    <input type="text" class="form-control input-sm duiqi" id="sIdNumber"
                                           placeholder="">
                                </div>
                            </div>--%>

                            <div class="form-group">
                                <label for="user-gender" class="col-xs-3 control-label">性别：</label>
                                <div class="col-xs-8" id="user-gender">
                                    <input id="user-gender-1" type="radio" name="gender" value="男" checked="checked"/> 男
                                    &nbsp&nbsp&nbsp
                                    <input id="user-gender-2" type="radio" name="gender" value="女"/> 女
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="user-phone-num" class="col-xs-3 control-label">手机号：</label>
                                <div class="col-xs-8">
                                    <input name="phoneNum" type="number" class="form-control input-sm duiqi"
                                           id="user-phone-num" placeholder="">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="user-birthday" class="col-xs-3 control-label">生日：</label>
                                <div class="col-xs-8">
                                    <input name="birthday" type="date" id="user-birthday"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="user-marital-status" class="col-xs-3 control-label">婚姻状态：</label>
                                <div class="col-xs-8">
                                    <select name="maritalStatus" id="user-marital-status"
                                            class=" form-control select-duiqi">
                                        <option value="1">未婚</option>
                                        <option value="2">离异</option>
                                        <option value="3">丧偶</option>
                                        <option value="4">已婚</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="user-email" class="col-xs-3 control-label">邮箱：</label>
                                <div class="col-xs-8 ">
                                    <input name="email" type="email" class="form-control input-sm duiqi" id="user-email"
                                           placeholder="">
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                    <button onclick="addUser()" type="button" class="btn btn-xs btn-green">保 存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!--弹出修改用户窗口-->
    <div class="modal fade" id="update-user-info-dialog" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">修改用户</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <form id="update-user-info-form" class="form-horizontal">

                            <div class="form-group">
                                <label for="update-user-id" class="col-xs-3 control-label">会员ID：</label>
                                <div class="col-xs-8 ">
                                    <input readonly="readonly" name="userId" type="text" class="form-control input-sm duiqi"
                                           id="update-user-id"
                                           placeholder=""/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="update-user-name" class="col-xs-3 control-label">会员姓名：</label>
                                <div class="col-xs-8 ">
                                    <input name="name" type="text" class="form-control input-sm duiqi"
                                           id="update-user-name"
                                           placeholder=""/>
                                </div>
                            </div>

                            <%--<div class="form-group">
                                <label for="sIdNumber" class="col-xs-3 control-label">身份证号：</label>
                                <div class="col-xs-8 ">
                                    <input type="text" class="form-control input-sm duiqi" id="sIdNumber"
                                           placeholder="">
                                </div>
                            </div>--%>


                            <div class="form-group">
                                <label for="update-user-gender" class="col-xs-3 control-label">性别：</label>
                                <div class="col-xs-8" id="update-user-gender">
                                    <input id="update-user-gender-0" type="radio" name="gender" value="男"
                                           checked="checked"/> 男
                                    &nbsp&nbsp&nbsp
                                    <input id="update-user-gender-1" type="radio" name="gender" value="女"/> 女
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="update-user-phone-num" class="col-xs-3 control-label">手机号：</label>
                                <div class="col-xs-8">
                                    <input name="phoneNum" type="tel" class="form-control input-sm duiqi"
                                           id="update-user-phone-num" placeholder="">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="update-user-birthday" class="col-xs-3 control-label">生日：</label>
                                <div class="col-xs-8">
                                    <input name="birthday" type="date" id="update-user-birthday"/>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="update-user-marital-status" class="col-xs-3 control-label">婚姻状态：</label>
                                <div class="col-xs-8">
                                    <select name="maritalStatus" id="update-user-marital-status"
                                            class=" form-control select-duiqi">
                                        <option value="1">未婚</option>
                                        <option value="2">离异</option>
                                        <option value="3">丧偶</option>
                                        <option value="4">已婚</option>
                                    </select>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="update-user-email" class="col-xs-3 control-label">邮箱：</label>
                                <div class="col-xs-8 ">
                                    <input readonly="readonly" name="email" type="email" class="form-control input-sm duiqi"
                                           id="update-user-email"
                                           placeholder="">
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                    <button onclick="updateUserInfo()" type="button" class="btn btn-xs btn-green">保 存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!--弹出删除用户警告窗口-->
    <div class="modal fade" id="deleteUserAlert" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        确定要删除该用户？删除后不可恢复！
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                    <button onclick="deleteUser()" type="button" class="btn  btn-xs btn-danger">保 存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

</div>
